<template>
  <div>
    <div>
      <h1>elementUI组件库学习</h1>
      <!--  Vue开发响应式网站,element-ui
           el-row:代表一行  gutter:设置列与列之间的间距
           el-col:代表一列  span属性:设置占多少栏【24栏】
      -->
      <el-row :gutter="200">
        <el-col :span="12" :xs="24">南拳</el-col>
        <el-col :span="12">北退</el-col>
      </el-row>
      <!--按钮-->
      <el-button type="primary" size="mini" plain round>我是主按钮</el-button>
      <el-button type="success" :loading="true">我是成功按钮</el-button>
      <el-button type="warning">我是警告按钮</el-button>
      <el-button type="danger" icon="el-icon-chat-line-round"
        >我是危险按钮</el-button
      >
      <el-button type="info" icon="el-icon-thumb">我是信息按钮</el-button>
      <!-- 单选按钮 -->
      <el-radio-group v-model="info">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>

      <!-- 日历 -->
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="**"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <!-- 轮播图 -->
      <div class="block" style="width:500px">
        <span class="demonstration">我是轮播图</span>
        <el-carousel height="150px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="pay-main">
      <div class="pay-container">
        <div class="checkout-tit">
          <h4 class="tit-txt">
            <span class="success-icon"></span>
            <span class="success-info"
              >订单提交成功，请您及时付款，以便尽快为您发货~~</span
            >
          </h4>
          <div class="paymark">
            <span class="fl"
              >请您在提交订单<em class="orange time">4小时</em
              >之内完成支付，超时订单会自动取消。订单号：<em>145687</em></span
            >
            <span class="fr"
              ><em class="lead">应付金额：</em
              ><em class="orange money">￥17,654</em></span
            >
          </div>
        </div>
        <div class="checkout-info">
          <h4>重要说明：</h4>
          <ol>
            <li>
              尚品汇商城支付平台目前支持<span class="zfb">支付宝</span
              >支付方式。
            </li>
            <li>其它支付渠道正在调试中，敬请期待。</li>
            <li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
          </ol>
          <h4>
            支付宝账户信息：（很重要，<span class="save">请保存！！！</span>）
          </h4>
          <ul>
            <li>支付帐号：11111111</li>
            <li>密码：111111</li>
            <li>支付密码：111111</li>
          </ul>
        </div>
        <div class="checkout-steps">
          <div class="step-tit">
            <h5>支付平台</h5>
          </div>
          <div class="step-cont">
            <ul class="payType">
              <li><img src="./images/pay2.jpg" /></li>
              <li><img src="./images/pay3.jpg" /></li>
            </ul>
          </div>
          <div class="hr"></div>

          <div class="payshipInfo">
            <div class="step-tit">
              <h5>支付网银</h5>
            </div>
            <div class="step-cont">
              <ul class="payType">
                <li><img src="./images/pay10.jpg" /></li>
                <li><img src="./images/pay11.jpg" /></li>
                <li><img src="./images/pay12.jpg" /></li>
                <li><img src="./images/pay13.jpg" /></li>
                <li><img src="./images/pay14.jpg" /></li>
                <li><img src="./images/pay15.jpg" /></li>
                <li><img src="./images/pay16.jpg" /></li>
                <li><img src="./images/pay17.jpg" /></li>
                <li><img src="./images/pay18.jpg" /></li>
                <li><img src="./images/pay19.jpg" /></li>
                <li><img src="./images/pay20.jpg" /></li>
                <li><img src="./images/pay21.jpg" /></li>
                <li><img src="./images/pay22.jpg" /></li>
              </ul>
            </div>
          </div>
          <div class="hr"></div>

          <div class="submit">
            <router-link class="btn" to="/paysuccess">立即支付</router-link>
          </div>
          <div class="otherpay">
            <div class="step-tit">
              <h5>其他支付方式</h5>
            </div>
            <div class="step-cont">
              <span><a href="weixinpay.html" target="_blank">微信支付</a></span>
              <span>中国银联</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pay",
  data() {
    return {
      info: "上海",
      date: "",
    };
  },
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

<style lang="less" scoped>
.pay-main {
  margin-bottom: 20px;

  .pay-container {
    margin: 0 auto;
    width: 1200px;

    a:hover {
      color: #4cb9fc;
    }

    .orange {
      color: #e1251b;
    }

    .money {
      font-size: 18px;
    }

    .zfb {
      color: #e1251b;
      font-weight: 700;
    }

    .checkout-tit {
      padding: 10px;

      .tit-txt {
        font-size: 14px;
        line-height: 21px;

        .success-icon {
          width: 30px;
          height: 30px;
          display: inline-block;
          background: url(./images/icon.png) no-repeat 0 0;
        }

        .success-info {
          padding: 0 8px;
          line-height: 30px;
          vertical-align: top;
        }
      }

      .paymark {
        overflow: hidden;
        line-height: 26px;
        text-indent: 38px;

        .fl {
          float: left;
        }

        .fr {
          float: right;

          .lead {
            margin-bottom: 18px;
            font-size: 15px;
            font-weight: 400;
            line-height: 22.5px;
          }
        }
      }
    }

    .checkout-info {
      padding-left: 25px;
      padding-bottom: 15px;
      margin-bottom: 10px;
      border: 2px solid #e1251b;

      h4 {
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
        color: #e1251b;
      }

      ol {
        padding-left: 25px;
        list-style-type: decimal;
        line-height: 24px;
        font-size: 14px;
      }

      ul {
        padding-left: 25px;
        list-style-type: disc;
        line-height: 24px;
        font-size: 14px;
      }
    }

    .checkout-steps {
      border: 1px solid #ddd;
      padding: 25px;

      .hr {
        height: 1px;
        background-color: #ddd;
      }

      .step-tit {
        line-height: 36px;
        margin: 15px 0;
      }

      .step-cont {
        margin: 0 10px 12px 20px;

        ul {
          font-size: 0;

          li {
            margin: 2px;
            display: inline-block;
            padding: 5px 20px;
            border: 1px solid #ddd;
            cursor: pointer;
            line-height: 18px;
          }
        }
      }
    }

    .submit {
      text-align: center;

      .btn {
        display: inline-block;
        padding: 15px 45px;
        margin: 15px 0 10px;
        font: 18px "微软雅黑";
        font-weight: 700;
        border-radius: 0;
        background-color: #e1251b;
        border: 1px solid #e1251b;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        text-decoration: none;
      }
    }
  }
}
</style>